<template>
	<div class="sc-upload-multiple">
		<div class="" @click="fileSelect && showfileSelect()">
			<el-upload ref="upload" class="uploader" :disabled="fileSelect" action="https://jsonplaceholder.typicode.com/posts/" :accept="accept" :show-file-list="false" :file-list="defaultFileList" :before-upload="before" :on-progress="progress" :on-success="success" :on-change="change" :on-remove="remove" :on-error="error" :http-request="request">
				<el-button type="primary" :icon="icon" circle :disabled="fileSelect"></el-button>
				<el-progress type="circle" v-if="isloading" :percentage="jindu" :show-text="false" :stroke-width="4" :width="45" style="position: absolute; left: -6.5px; top: -6.5px;"/>
			</el-upload>
		</div>
	</div>
</template>

<script>
	import { defineAsyncComponent } from 'vue'
    import COS from 'cos-js-sdk-v5'
	import config from "@/config/upload";
	const scFileSelect = defineAsyncComponent(() => import('@/components/scFileSelect'))

	export default {
		props: {
			modelValue: { type: String, default: "" },
			action: { type: String, default: "" },
			apiObj: { type: Object, default: () => {} },
			accept: { type: String, default: "image/gif, image/jpeg, image/png" },
			maxSize: { type: Number, default: config.maxSize },
			title: { type: String, default: "" },
			icon: { type: String, default: "el-icon-picture-outline" },
			fileSelect: { type: Boolean, default: false },
		},
		components: {
			scFileSelect
		},
		data(){
			return {
				value: "",
				defaultFileList: [],
				fileList: [],
				fileSelectDialogVisible: false,
                cosapi: null,
                cosdata: {},
				isloading: false,
            	jindu: 0
			}
		},
		watch:{
			modelValue(){
				this.$refs.upload.uploadFiles=this.modelValuetoArr
				this.fileList = this.modelValuetoArr
				this.value = this.modelValue
			},
			fileList: {
				handler(){
					if(this.isAllSuccess){
						this.$emit('update:modelValue', this.fileListtoStr);
					}
				},
				deep: true
			}
		},
		computed: {
			modelValuetoArr(){
				return this.toArr(this.modelValue)
			},
			fileListtoStr(){
				return this.toStr(this.fileList)
			},
			preview(){
				return this.fileList.map(v => v.url)
			},
			isAllSuccess(){
				var all_length = this.fileList.length;
				var success_length = 0
				this.fileList.forEach(item => {
					if(item.status == "success"){
						success_length += 1
					}
				})
				return success_length == all_length
			}
		},
		mounted() {
			this.defaultFileList = this.toArr(this.modelValue);
			this.fileList = this.toArr(this.modelValue)
			this.value = this.modelValue
            config.iscos && this.cosget()
		},
		methods: {
            async cosget(){
				let res = await this.$API.storage.cos.tempsecret.get()
				this.cosapi = new COS({
                    getAuthorization: function (options, callback) {
                        callback({
                            TmpSecretId: res.data.credentials.tmpSecretId,
                            TmpSecretKey: res.data.credentials.tmpSecretKey,
                            XCosSecurityToken: res.data.credentials.sessionToken,
                            ExpiredTime: res.data.expiredTime
                        });
                    }
                })
				this.cosdata = res.data
			},
			showfileSelect(){
				this.fileSelectDialogVisible = true
			},
			fileSelectSubmit(val){
				const newval = [...this.modelValue.split(","),...val].join(",")
				this.$emit('update:modelValue', newval);
				this.fileSelectDialogVisible = false
			},
			//默认值转换为数组
			toArr(str){
				var _arr = [];
				var arr = str.split(",");
				arr.forEach(item => {
					if(item){
						_arr.push({
							name: "F",
							status: "success",
							url: item
						})
					}
				})
				return _arr;
			},
			//数组转换为原始值
			toStr(arr){
				var _arr = [];
				arr.forEach(item => {
					_arr.push(item.url)
				})
				var str = _arr.join(",")
				return str;
			},
			before(file){
				const maxSize = file.size / 1024 / 1024 < this.maxSize;
				if (!maxSize) {
					this.$message.warning(`上传文件大小不能超过 ${this.maxSize}MB!`);
					return Promise.reject(false);
				}
				this.isloading = true
			},
			change(file, fileList){
				file.tempImg = URL.createObjectURL(file.raw);
				this.fileList = fileList
			},
			success(res, file){
                var response = config.iscos ? config.cosData(res) : config.parseData(res);
                if(response.code != config.successCode){
					this.$message.warning(response.msg || "上传文件未知错误")
				}else{
                    file.url = response.src
                    file.path = response.src.match(/.+\.com(.+)/)[1]
                    this.$emit('success', file);
				}
			},
			progress(){

			},
			remove(){

			},
			error(err){
				this.$notify.error({
					title: '上传文件错误',
					message: err
				})
			},
			del(index){
				this.fileList.splice(index, 1);
			},
			request(param){
                let apiObj = config.apiObj;
				if(this.apiObj){
					apiObj = this.apiObj;
				}
                const data = new FormData();
				data.append("file", file);
				var file = this.cropper ? this.cropperUploadFile : param.file
				
				// 重新定义文件名防止中文
				let uploadFilePath = this.cosdata.tempUploadPath.slice(0, this.cosdata.tempUploadPath.length - 1)
				let uploadFileExt = file.type ? file.type.split("/")[1] : file.name.split(".").pop()
				let uploadFileName = uploadFilePath + "/" + (new Date().getTime()) + '.' + uploadFileExt
				
                if(config.iscos){
					this.cosapi.putObject({
						Bucket: this.cosdata.bucket,
						Region: this.cosdata.region,
						Key: uploadFileName,
						Body: file,
						onProgress: () => {
							this.jindu = this.jindu + 1
						}
					}, (err, data) => {
						if (data) {
							this.jindu = 100
							setTimeout(() => {
								this.isloading = false
							},500)
							param.onSuccess(data)
						} else {
							param.onError(err)
						}
					});
				} else {
					apiObj.post(data).then(res => {
						param.onSuccess(res)
					}).catch(err => {
						param.onError(err)
					})
				}
			}
		}
	}
</script>

<style scoped>

	.el-form-item.is-error .sc-upload-uploader {border: 1px dashed #F56C6C;}

	.sc-upload-multiple {display: inline-block;position: relative;}


	.sc-upload-list {display: inline-block;}
	.sc-upload-list li {list-style: none;display: inline-block;width: 120px;height: 120px;margin-right: 10px;vertical-align: top;box-sizing: border-box;}

	.sc-upload-item {position: relative;width: 100%;height: 100%;}
	.sc-upload-item .mask {display: none;position: absolute;top:0px;right:0px;line-height: 1;z-index: 1;}
	.sc-upload-item .mask span {display: inline-block;width: 25px;height:25px;line-height: 23px;text-align: center;cursor: pointer;color: #fff;}
	.sc-upload-item .mask span i {font-size: 12px;}
	.sc-upload-item .mask .del {background: #F56C6C;}

	.sc-upload-item:hover .mask {display: inline-block;}


	.sc-upload-list .image {width: 100%;height: 100%;}

	.sc-upload-list .image-slot {display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;}
	.sc-upload-list .image-slot i {font-size: 20px;}

	.sc-upload-uploader {border: 1px dashed #d9d9d9;width: 120px;height: 120px;display: inline-block;vertical-align: top;box-sizing: border-box;}
	.sc-upload-uploader:hover {border: 1px dashed #409eff;}
	.sc-upload-uploader .uploader {width: 100%;height: 100%;}
	.sc-upload-uploader:deep(.el-upload) {width: 100%;height: 100%;}


	.sc-upload-uploader .file-empty {width: 100%;height: 100%;line-height: 1;display: flex;flex-direction: column;align-items: center;justify-content: center;}
	.sc-upload-uploader .file-empty i {font-size: 28px;color: #8c939d;}
	.sc-upload-uploader .file-empty h4 {font-size: 12px;font-weight: normal;color: #8c939d;margin-top: 10px;}


</style>
